<template>
  <div>
    <h3>父亲</h3>
    <h3>娃娃数量：{{sum}}</h3>
    <h3>书的数量：{{booksum}}</h3>
    <button @click="getbook($refs)">获取小女儿一本书</button>
    <button @click="changeToy($refs)">换成蜡笔小新</button>
    <button @click="getmoney($refs)">每人上交压岁钱100元</button>
    <Child1 ref = "c1" />
    <Child2 ref = "c2" />

  </div>
</template>

<script setup lang='ts' name="Father">
import { ref, reactive } from 'vue'

import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

let sum = ref(10)
let booksum = ref(0)
let c1 = ref()
let c2 = ref()
function getbook1(){
c2.value.book --;
}
function changeToy1(){
c1.value.toy = "蜡笔小新"
}
function getbook(refs:any){
    // console.log(refs);
    // console.log(refs.c2.book,);
    refs.c2.book--;
    booksum.value++
    
    
}

function changeToy(refs:any){
    refs.c1.toy = "蜡笔小新"
}
function getmoney(refs:any){
    // console.log(refs);
    // console.log(refs.target);
    
    // ts和js中的循环有多少种:https://blog.csdn.net/weixin_43465508/article/details/132768971
    // for(var i in refs.values()){
    //     i.money -= 100
    // }
    // 相关文章：https://blog.csdn.net/qq_53008257/article/details/124911142
    refs.c1.money -= 100
    refs.c2.money -= 100
}
defineExpose({sum})
</script>


<style lang='scss' scoped>

</style>